<template>
  <div class="bigbox">
    <div class="topbox">
      <div class="filter">
        <el-form :model="form" label-position="left" label-width="80px">
          <el-row :gutter="20">
            <el-col :span="5">
              <el-form-item label="建筑群">
                <!-- <el-select size="small" v-model="form.buildingId" @change="changeqiye">
                  <el-option v-for="(item,index) in qiyelist" :key="index" :label="item.name" :value="item.id" class="option"></el-option>
                </el-select> -->
                <FilterSelect2
                      v-model="form.buildingId"
                      :optionlist="qiyelist"
                      @updateModelValue="changeqiye"
                      :valuekey="{ name: 'name', value: 'id' }"
                    ></FilterSelect2>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="用户">
                <!-- <el-select size="small" v-model="form.customerId" filterable >
                  <el-option v-for="(item,index) in yonghulist" :key="index" :label="item.customerName" :value="item.id" class="option"></el-option>
                </el-select> -->
                <FilterSelect2
                      v-model="form.customerId"
                      :optionlist="yonghulist"
                      :valuekey="{ name: 'customerName', value: 'id' }"
                    ></FilterSelect2>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="用能类型">
                <el-select size="small" v-model="form.meterType" style="width: 100%;">
                  <el-option v-for="(item,index) in yomgnenglist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" style="display: flex;margin-top: 4px;">
              <!-- <el-form-item label="时间选择"> -->
                <el-radio-group v-model="radio2" size="small" style="margin-right: 10px;">
                  <el-radio-button label="month">月</el-radio-button>
                  <el-radio-button label="year">年</el-radio-button>
                </el-radio-group>
                <!-- <span v-if="radio2=='month'"> -->
                  <el-date-picker
                    size="small"
                    v-if="radio2=='month'"
                    style="flex:1;"
                    v-model="value1"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                <!-- </span>
                <span v-else> -->
                  <el-date-picker
                    v-model="value2"
                    v-else
                    size="small"
                    type="monthrange"
                    style="flex:1;"
                    value-format="yyyy-MM"
                    range-separator="-"
                    start-placeholder="开始月份"
                    end-placeholder="结束月份">
                  </el-date-picker>
                <!-- </span> -->
              <!-- </el-form-item> -->
            </el-col>
            <el-col :span="3" style="text-align: right;margin-top: 4px;">
              <!-- <el-form-item> -->
                <el-button size="small" @click="chongzhi" >重 置</el-button>
                <el-button  @click="getdatalist()" type="primary" size="small">查 询</el-button>
              <!-- </el-form-item> -->
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="bodybox">
      <div class="title">
        <div>用电明细</div>
          <div><TopTile  @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile></div>
      </div>
      <div class="tablebox">
        <TableColumn
        ref="tabledata"
        :tableData="tableData" 
        :tableConfig="tableConfig" 
        :issize="issize">
        <el-table-column
          prop="totalValue"
          label="总用电(kWh)"
          align="right"
          fixed="right"
          width="110">
        </el-table-column>
        <el-table-column
          prop="totalAmount"
          label="总电费(元)"
          fixed="right"
          align="right"
          width="100">
        </el-table-column>
        <el-table-column
            label="操作"
            align="center"
            fixed="right"
            width="100">
            <template #default="{row}">
              <el-tooltip class="item" effect="dark" content="浏览" placement="top">
                <i @click="chakan(row)" class="el-icon-view" style="color: #1a90fe;cursor: pointer;"></i>
              </el-tooltip>
            </template>
        </el-table-column>
      </TableColumn>
      </div>
      <!-- 底部分页 -->
      <div class="fenye">
          <el-pagination
                background
                layout="prev, pager, next"
                :current-page.sync="pageobj.pageNo"
                :page-size="20"
                @current-change="getdatalist"
                :total="+totalCount">
          </el-pagination>
        </div>
    </div>
    <!-- 查看详情弹窗 -->
     <div class="dialog">
        <el-dialog
          :title="title"
          :visible.sync="dialogVisible"
          width="70%">
          <div>
            <div class="diatext">
              <div class="littleboss">用户名称 : {{ rowvalue.customerName}}</div>
              <div class="littleboss">用户编号 : {{  rowvalue.customerCode }}</div>
              <!-- <div class="text bgc">用户名称</div>
              <div class="text">{{ rowvalue.customerName}}</div>
              <div class="text bgc">用户编号</div>
              <div class="text">{{  rowvalue.customerCode }}</div> -->
            </div>
            <div v-for="(item,index) in forlist" :key="index" style="margin: 20px 0">
                    <div  style="font-size: 14px;margin-bottom: 10px;color:#000;margin-bottom: 20px;display: flex;">
                      <div style="width: 50%;">电表名称 : {{ rowvalue.meterName }} </div>
                      <div style="width: 50%;">抄表时间 : {{ item.meterReadingStartDate }} 至 {{ item.meterReadingEndDate }}</div>
                    </div>
                    <div class="dianfeitable">
                      <TableColumn
                        ref="tabledata"
                        :tableData="item.childenlist" 
                        :tableConfig="tableConfigs" 
                        size="medium">
                      </TableColumn>
                    </div>
            </div>
            </div>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogVisible = false">关闭</el-button>
          </span>
        </el-dialog>
      </div>
  </div>
</template>

<script>
import { getzidianxialaapi } from '@/api/guidelines'
import {gettablelistapi} from '@/api/prwpaid/user-manage/OpenAaccount'
import {getloginlistapi} from '@/api/prwpaid/file-management/Architectural-complex'
import {getreportmingxiapi,getwebmingxiapi} from '@/api/prwpaid/report-forms/detail'
import TopTile from '@/components/TopTitle/index.vue'
import TableColumn from '@/components/Table/index.vue'
import { exportexcel } from '@/utils/excel'
import {MakemeterEleclist,MakemeterWorterlist} from '../month-report/MakeList'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTile,
    TableColumn
  },
  data() {
    return {
      title: '',
      forlist:[],
      rowvalue: {},
      activeNames:'',
      tableConfigs: [],
      tableDatass: [],
      tableConfigss:[],
      dialogVisible:false,
      yomgnenglist:[],
      totalCount:'',
      issize: 'medium',
      value2:['',''],
      radio2: 'month',
      form: {meterType:'',customerId:'',buildingId:''},
      qiyelist: [],
      yonghulist: [],
      value1: ['',''],
      tableData:[],
      tableConfig: [
        { label: '序号', type: 'index', center: 'center', width: '70' },
        { label: '日期', prop: 'date' ,center:'center', width: '110'},
        { label: '建筑群名称', prop: 'buildingName', width: '210'  },
        { label: '用户名', prop: 'customerName', width: '210'  },
        { label: '用户编号', prop: 'customerCode' , width: '200'},
        { label: '电表名称', prop: 'meterName', width: '200' },
        { label: '尖用电(kWh)', prop: 'sharpValue', center: 'right', width: '110' },
        { label: '尖电费(元)', prop: 'sharpAmount', center: 'right' , width: '100'},
        { label: '峰用电(kWh)', prop: 'peakValue', center: 'right', width: '110' },
        { label: '峰电费(元)', prop: 'peakAmount', center: 'right' , width: '100'},
        { label: '平用电(kWh)', prop: 'flatValue', center: 'right', width: '110' },
        { label: '平电费(元)', prop: 'flatAmount', center: 'right' , width: '100'},
        { label: '谷用电(kWh)', prop: 'valleyValue' ,center:'right', width: '110'},
        { label: '谷电费(元)', prop: 'valleyAmount', center: 'right' , width: '100'},
        { label: '深谷用电(kWh)', prop: 'deepValleyValue' ,center:'right', width: '140'},
        { label: '深谷电费(元)', prop: 'deepValleyAmount',center:'right' , width: '120'},
      ],
      pageobj: {
        pageNo: 1,
        pageSize:20
      }
    };
  },

  async mounted() {
    this.gettime()
    // 获取用能类型
    const yonghu = await getzidianxialaapi({ dictType: 'MBM_ENERGY_TYPE' })
    this.yomgnenglist = yonghu.data.list
    this.form.meterType=this.yomgnenglist[0].value
    const res = await getloginlistapi()
    this.qiyelist = res.data.list
    const localbuildingId = localStorage.getItem('buildingId')
    const isBuildIdInArray = this.qiyelist.some(item => item.id == localbuildingId);
    if(isBuildIdInArray){
      this.form.buildingId = localbuildingId ? localbuildingId : ''
      this.getyonghuxialalist(this.form.buildingId)
    }else{
      this.form.buildingId= ''
    }
    this.getdatalist()

  },

  methods: {
    // 企业下拉
    changeqiye(val) {
      localStorage.setItem('buildingId', val)
      this.getyonghuxialalist(val)
    },
    // 获取用户
    async getyonghuxialalist(val) {
    const ress = await gettablelistapi({
        pageNo: 0, pageSize: 500,
      startDate: '', endDate: '', 
      state:'20',buildingId:val,customerType:''
    })
    this.yonghulist = ress.data.list
    },
    //查看详情
    async chakan(row) {
      this.title=`${row.buildingName} ${row.customerName} ${row.date} 用电明细`
      this.rowvalue = row
      // const energyType=this.yomgnenglist.filter(ele=>ele.text==row.meterType)[0].value
      const res= await getwebmingxiapi({
        date:row.date,measuringPointId:row.measuringPointId,priceSchemeId:row.priceSchemeId,
        timeType:this.radio2
      })
      if (row.meterType=='电') {
        this.forlist = MakemeterEleclist(res.data.list,row)
        this.tableConfigs=[      { label: '用电明细', prop: 'mingxi' },
        { label: '上期示数', prop: 'shangqi' ,center:'right'},
        { label: '本期示数', prop: 'benqi', center: 'right' },
        { label: 'CT', prop: 'ct' ,center:'right'},
        { label: 'PT', prop: 'pt', center: 'right' },
        { label: '电量(kWh)', prop: 'dianliang',center:'right'},
        { label: '单价(元/kWh)', prop: 'danjia',center:'right',width:'120'  },
          { label: '电费金额(元)', prop: 'jine', center: 'right' },]
        this.tableConfigss =[      { label: '分摊明细', prop: 'meterName' },
      { label: '分摊电量(kWh)', prop: 'apportionConsumption',center:'right'},
        { label: '分摊电价(元/kWh)', prop: 'contactPhone',center:'right',width:'150'  },
        { label: '分摊电费(元)', prop: 'apportionFee', center: 'right' },
        { label: '分摊日期', prop: 'date',center:'center' }]
      } else {
        this.forlist = MakemeterWorterlist(res.data.list)
        this.tableConfigs=[      { label: '用水明细', prop: 'mingxi' },
        { label: '上期示数', prop: 'shangqi' ,center:'right'},
        { label: '本期示数', prop: 'benqi', center: 'right' },
        { label: '水量(吨)', prop: 'dianliang',center:'right'},
        { label: '单价(元/吨)', prop: 'danjia',center:'right',width:'120'  },
          { label: '水费金额(元)', prop: 'jine', center: 'right' },]
          this.tableConfigss =[      { label: '分摊明细', prop: 'meterName' },
        { label: '分摊水量(吨)', prop: 'apportionConsumption',center:'right'},
        { label: '分摊水价(元)', prop: 'contactPhone',center:'right',width:'150'  },
        { label: '分摊水费(元)', prop: 'apportionFee', center: 'right' },
        { label: '分摊日期', prop: 'date',center:'center' }]
      }
      this.activeNames=this.forlist[0]?.meterId
      this.dialogVisible=true
    },
    // 获取表格数据
    async getdatalist() {
      this.$refs.tabledata.loading=true
     const {data:{list,totalCount}} = await getreportmingxiapi({
        ...this.form, pageNo: this.pageobj.pageNo - 1, pageSize: this.pageobj.pageSize,
        timeType: this.radio2, startDate: this.radio2 == 'month' ? this.value1[0] : this.value2[0],
        endDate:this.radio2 == 'month' ? this.value1[1] : this.value2[1],
     })
     this.tableData=list
     this.totalCount=totalCount
     this.$refs.tabledata.loading=false
    },
    // 重置搜索条件
    chongzhi() {
      localStorage.removeItem('buildingId');
      this.form = {meterType:'',customerId:'',buildingId:''}
      this.radio2 = 'month'
      this.value1 = ['', '']
      this.value2 = ['', '']
      this.startyear = ''
      this.endyear = ''
      this.getdatalist()
    },
  // 导出
    daochu() {
      exportexcel('mbm-microservice-biz/mbm/report/energy/details/exportExcel', {
        ...this.form,endDate:this.radio2 == 'month' ? this.value1[1] : this.value2[1],
        timeType: this.radio2, startDate: this.radio2 == 'month' ? this.value1[0] : this.value2[0],
      },'用电用水明细')
    },
  // 刷新
  shuaxin() {
    this.getdatalist()
    this.$message.success('列表刷新成功')
  },
  // 调节表格密度
  command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 获取当前时间戳
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month =mon<10?'0'+mon:mon
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() //日
      this.value1=[year+'-'+month+'-'+'01',year+'-'+month+'-'+day]
    },
  },
};
</script>

<style scoped>
.bigbox{
  height: 100%;
  padding: 10px;
  .option{
    padding-left: 10px;
  }
  .dialog{
      .button{
        width: 60px;
        height: 30px;
        border-radius: 3px;
      }
      .pfd{
        display: flex;
        justify-content: space-between;
      }
      .diatext{
      margin-bottom: 10px;
      margin-top: 10px;
      display: flex;
      color: #000;
      .littleboss{
        width: 50%;
        font-size: 14px;
      }
      .title{
        display: flex
      }
    }
  }
  .topbox{
    height: 80px;
    padding: 20px ;
    margin-bottom: 10px;
    background-color: #fff;
  }
  .bodybox{
    height: calc(100% - 90px);
    background-color: #fff;
    padding: 20px;
    .title{
      display:flex;
      justify-content: space-between;
    }
    .tablebox{
      margin-top: 10px;
      height: 88%;
    }
    .fenye{
      text-align: right;
      margin-top: 10px;
    }
  }
}
::v-deep .el-range__icon{
  margin-left:0px !important;
}
::v-deep .el-dialog__footer{
  text-align: center;
}
::v-deep .el-collapse-item__header {
  border: 1px solid #EBEEF5;
  padding: 0 20px;
  background-color: #fafafa;
 }
::v-deep .el-collapse-item__wrap{
  border: 1px solid #EBEEF5;
  padding: 20px 20px 0 20px;
}
::v-deep .el-collapse{
  border: 1px solid #EBEEF5;
}

::v-deep .collapse-title {
         flex: 1 0 90%;
         order: 1;
     }
     
::v-deep .el-collapse-item__header {
         flex: 1 0 auto;
         order: -1;
  }
</style>